import React, { Component } from 'react'
import ReactDom from 'react-dom'
import { Router, Route, Link, IndexLink, hashHistory, IndexRoute } from 'react-router'
import * as Actions from "../actions"

export default class ReadBook extends Component {
    constructor(props) {
        super(props)
        this.state = { single: true, book: {}, bookContent: {} }
    }
    componentDidMount() {
        let {bookId} = this.props.params
        console.log("bookId: ", bookId)
        Actions.getBook(bookId).then(book => {
            this.setState({ book: book })
        })
        getBookContent(bookId).then((bookContent) => {
            console.log("getBookContent book: ", bookContent)
            bookContent.content = bookContent.content.split("\n").map((line, i) => <p key={i}>{line}</p>)
            this.setState({ bookContent })
        })
    }
    render() {
        return <div className="container" style={{ marginTop: "10px" }}>
            <div className="col-xs-2" style={{ paddingLeft: "20px" }}>
                <div style={{ height: "880px" }}>
                    <img className="img-responsive" style={{ width: "100%" }} src={`bookService/getBookCover/${this.state.book.cover}`} />
                    <h1 className="text-center">${this.state.book.name}</h1>
                </div>
            </div>
            <div className="col-xs-10">
                <div style={{ height: "30px" }}>
                    <Link className="btn btn-default pull-right" to={`/booklist/${this.state.book.categoryId}`}>返回</Link>
                </div>
                {this.state.bookContent.content ?
                    <div style={{ height: "860px" }}>
                        <div className="col-xs-10">
                            {this.state.bookContent.content}
                        </div>
                    </div>
                    : "加载中"}
            </div>
        </div >

    }
}
// -webkit-column-count:4
// 78e9ff94-0f5d-42ea-af06-16f8dd3ecde0
// <a className="btn btn-default">单页阅读</a>
// <a className="btn btn-default">双页阅读</a>

class SinglePage extends Component {
    constructor(props) {
        super(props)
    }
    render() {
        return <div>
            <div>

            </div>
        </div>
    }

}
class DoublePage extends Component {
    constructor(props) {
        super(props)
    }
    render() {
        return <div>
            this is doublepage.
        </div>
    }

}

const getBookContent = (bookId) => {
    console.log(bookId)
    return fetch("/bookService/getBookContent", {
        method: 'POST', headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
        }, body: JSON.stringify({ bookId: bookId })
    })
        .then(res => {
            return res.json()
        })
}

const text = <span>HTML 4 增加了使事件在浏览器中触发动作的能力，比如当用户点击元素时启动 JavaScript。
如需学习更多有关事件编程的知识，请访问我们的 JavaScript 教程。
下面列出了添加到 HTML 元素以定义事件动作的全局事件属</span>